<template>
  <div>
    <el-drawer
      size="50%;overflow:auto;display:flex;"
      :visible.sync="drawer"
      :before-close="handleClose"
    >
      <h2 class="titlex">{{titles}}</h2>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="70px"
        class="demo-ruleForm"
      >
        <el-form-item label="标题" prop="title">
          <el-input class="input" :disabled="bools" v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="类别" prop="cid">
          <el-select :disabled="bools" v-model="ruleForm.cid" placeholder="请选择活动区域">
            <el-option
              v-for="(item,i) in classifyList"
              :key="i"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用时" prop="time">
          <el-select :disabled="bools" v-model="ruleForm.time" placeholder="请选择活动区域">
            <el-option label="1分钟" value="1分钟"></el-option>
            <el-option label="3分钟" value="3分钟"></el-option>
            <el-option label="5分钟" value="5分钟"></el-option>
            <el-option label="10分钟" value="10分钟"></el-option>
            <el-option label="15分钟" value="15分钟"></el-option>
            <el-option label="20分钟" value="20分钟"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <!-- 遮罩层 -->
          <!-- <div v-show="disabled" class="model"></div> -->
          <mavon-editor style="margin-right: 20px;" disabled v-model="ruleForm.content"></mavon-editor>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input :disabled="bools" type="input" v-model="ruleForm.author"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button v-show="!bools" type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <!-- 头 -->
    <el-row :gutter="20">
      <el-col :span="16">
        <el-button type="primary" @click="AddFn">新增</el-button>
        <el-button type="danger" @click="removeFns" :disabled="bool">批量删除</el-button>
      </el-col>
      <el-col :span="8">
        <el-input @change="inpFn" v-model="input" placeholder="请输入内容"></el-input>
      </el-col>
    </el-row>
    <!-- table表格 -->
    <!-- {{list}} -->
    <el-table
      @sort-change="sortFn"
      ref="multipleTable"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%;marginTop:20px"
      @selection-change="handleSelectionChange"
      border
      :height="totalHeight"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" :index="indexMethod" width="55" label="#"></el-table-column>
      <el-table-column prop="title" label="标题" width="200"></el-table-column>
      <el-table-column prop="type" label="分类" width="120"></el-table-column>
      <el-table-column prop="author" label="作者" show-overflow-tooltip></el-table-column>
      <el-table-column prop="time" label="用时" show-overflow-tooltip>
        <template slot-scope="scope">{{scope.row.time}}分钟</template>
      </el-table-column>
      <el-table-column sortable prop="date" label="发布时间" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="260">
        <template slot-scope="scope">
          <el-button @click="updata(scope.row)" type="warning">修改</el-button>
          <el-button @click="removeFn(scope.row)" type="danger">删除</el-button>
          <el-button @click="showContent(scope.row)" type="success">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="changeFn"
      layout="prev, pager, next"
      :page-size="5"
      :pager-count="11"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
import { mapActions } from "vuex";
import mixin from '../../utils/mixin';
export default {
  mixins: [mixin],
  components: {
    mavonEditor
  },
  data() {
    return {
      bool: true,
      input: "",
      drawer: false,
      ruleForm: {},
      rules: {
        title: [
          { required: true, message: "请输入新增标题", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        cid: [{ required: true, message: "请选择类别", trigger: "change" }],
        time: [{ required: true, message: "请选择用时", trigger: "change" }],
        author: [{ required: true, message: "请输入作者", trigger: "blur" }]
      },
      arrsId: [],
      bools: true,
      titles: "新增",
      // totalHeight: window.innerHeight - 240
    };
  },
  mounted() {
    console.log(this.total);
    if (JSON.parse(localStorage.getItem("val"))) {
      this.input = JSON.parse(localStorage.getItem("val"));
    } else {
      this.input = "";
    }
    this.getList();
    this.getClassify();
    // window.onresize = () => {
    //   return (this.totalHeight = window.innerHeight - 240);
    // };
  },
  methods: {
    ...mapActions("msbd", [
      "getList",
      "getClassify",
      "getSave",
      "getDelete",
      "getPages",
      "getKeyword",
      "getSort"
    ]),
    //连接索引
    indexMethod(index) {
      console.log(index);
      return index + 1 + this.pages.pages * this.pages.pagesize;
    },
    //多选框
    handleSelectionChange(res) {
      this.arrsId = res.map(item => item.id).join(",");
      if (res.length > 0) {
        this.bool = false;
      } else {
        this.bool = true;
      }
    },
    //点击新增
    submitForm(formName) {
      console.log(this.ruleForm);
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.getSave(this.ruleForm);
          this.$message({
            message: "新增成功",
            type: "success"
          });
          this.drawer = false;
          this.ruleForm = {};
        } else {
          console.log("error submit!!");
          return false;
        }
      });

      console.table(this.ruleForm);
    },
    //显示抽屉
    AddFn() {
      this.titles = "新增数据";
      this.ruleForm = {};
      this.drawer = true;
      this.bools = false;
    },
    // 修改
    updata(row) {
      console.log(row);
      this.drawer = true;
      this.ruleForm = { ...row };
      this.bools = false;
      this.titles = "修改数据";
    },
    //删除
    removeFn(row) {
      this.$confirm("此操作将永久删除该该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(async () => {
          this.getDelete(row.id);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //批量删除
    removeFns() {
      this.$confirm("此操作将永久删除该该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(async () => {
          this.getDelete(this.arrsId);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //查看详情
    showContent(row) {
      this.titles = "查看详情";
      this.ruleForm = row;
      this.bools = true;
      this.drawer = true;
    },
    //抽屉关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
          this.bools = false;
        })
        .catch(_ => {});
    },
    //分页
    changeFn(val) {
      this.getPages(val - 1);
      console.log(val);
    },
    //搜索
    inpFn() {
      this.getKeyword(this.input);
      localStorage.setItem("val", JSON.stringify(this.input));
    },
    //排序
    sortFn(row) {
      this.getSort(row);
    }
  },
  computed: {
    list() {
      return this.$store.state.msbd.list;
    },
    classifyList() {
      return this.$store.state.msbd.classifyList;
    },
    total() {
      return this.$store.state.msbd.total;
    },
    pages() {
      return this.$store.state.msbd.pages;
    }
  }
};
</script>

<style scoped>
.v-note-wrapper.shadow {
  border: none;
  height: 300px;
}
.auto {
  overflow: auto;
}
.titlex {
  position: relative;
  bottom: 50px;
  left: 40px;
  margin: 0;
  display: inline-block;
}
.demo-ruleForm {
  margin-top: -20px;
}
.input {
  width: 220px !important;
}
</style>